<template>
    <div>
        <div class="top">
            <span>数据统计</span>
            <el-button plain>今日</el-button>
            <el-button type="primary" plain>7天</el-button>
            <el-button plain>15天</el-button>
            <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd">
            </el-date-picker>
            {{time}}
        </div>
        <el-row :gutter="20">
            <el-col :span="6"><div class="col-list">新增用户<span>13323</span></div></el-col>
            <el-col :span="6"><div class="col-list">新增商户<span>1323</span></div></el-col>
            <el-col :span="6"><div class="col-list">新增商品<span>2323</span></div></el-col>
            <el-col :span="6"><div class="col-list">订单数<span>1332322</span></div></el-col>
        </el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="map">
            <el-tab-pane label="用户" name="first">
                <IEcharts
                    :option="first"
                    style="height: 400px;"
                />
            </el-tab-pane>
            <el-tab-pane label="商户" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="商品" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="订单数" name="fourth">定时任务补偿</el-tab-pane>
            <el-tab-pane label="订单金额" name="fifth">定时任务补偿</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
// import IEcharts from 'vue-echarts-v3/src/lite.js';
// import 'echarts/lib/chart/line';
// import 'echarts/lib/component/legend'
// import 'echarts/lib/component/tooltip';
import IEcharts from 'vue-echarts-v3'

export default {
    components: { IEcharts },
    data() {
        return {
            time: '',
            activeName: 'first',
            first: {
                legend: {
                    bottom: 10,
                    left: 'center',
                    data: ['总', '当天']
                },
                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                xAxis: {
                    data: ['2018-01-01', '2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05', '2018-01-06', '2018-01-07']
                },
                yAxis: {},
                series: [{
                    name: '总',
                    type: 'line',
                    data: [115, 1120, 1236, 810, 990, 2000, 2020]
                }, {
                    name: '当天',
                    type: 'line',
                    data: [15, 120, 136, 110, 110, 210, 100]
                }]
            }
        }
    },
    methods: {
        handleClick(e) {
            console.log(e.name, this.activeName);
        }
    }
}
</script>

<style lang="less" scoped>
    .top{
        margin-bottom: 20px;
    }
    .col-list{
        text-align: center;
        font-size: 18px;
        border: 1px solid #ddd;
        padding: 15px 0;
        background: azure;
        span{
            color: #ff0000;
            display: block;
            font-size: 22px;
        }
    }
    .map{
        margin-top: 10px;
    }
</style>

